<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据导入</title>

    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <!-- 引入element 的组件库-->
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>

    <!--引入layui组件-->
    <link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css"  media="all">
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1"></script>

    <style>
        body{
            padding: 20px 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <el-form ref="form" size="mini" label-width="90px">
                <el-form-item label="说明">
                    <div style="color: red;">excel文件默认导入第一个sheet，并第一个sheet的第一行必须是表头。</div>
                </el-form-item>
                <el-form-item label="选择文件">
                    <el-upload
                            :action="uploadAction"
                            :headers="headers"
                            :on-success="uploadSuccess"
                            :file-list="uploadFileList" >
                        <el-button size="small" type="primary">选择xls文件</el-button>
                    </el-upload>
                </el-form-item>

                <template v-if="proShow" >
                    <el-form-item label="进度" style="width: 50%;">
                        <el-progress :text-inside="true" :stroke-width="26"  :percentage="proInfo.pro"></el-progress>
                        <div>{{proInfo.msg}}</div>
                    </el-form-item>

                    <el-form-item label="失败记录" style="width: 100%;">
                        <div style="margin-bottom: 4px;"><el-button type="primary" @click="getErrorListdata">刷新</el-button></div>
                        <el-table
                                :data="errorListData"
                                border
                                :height="350"
                                size="mini"
                                style="width: 100%">

                            <el-table-column
                                    prop="sj"
                                    label="导入时间"
                                    width="180">
                            </el-table-column>

                            <el-table-column
                                    prop="data_txt"
                                    label="数据"
                                    width="400">
                            </el-table-column>

                            <el-table-column
                                    prop="error"
                                    label="错误信息"
                                    width="200">
                            </el-table-column>
                        </el-table>

                        <el-pagination
                                background
                                @current-change="handleCurrentChange"
                                @size-change="sizeChange"
                                layout="prev, pager, next,total,sizes"
                                :total="total"
                                :page-size="pageSize"
                                :page-sizes="pageSizes"
                        >
                        </el-pagination>

                    </el-form-item>
                </template>





                <template v-if="xlsPath != ''">

                    <el-form-item label="导入目标">
                        {{tableName}}
                    </el-form-item>
                    <el-form-item label="字段匹配"  >
                        <el-table
                                :data="tableData"
                                border
                                size="mini"
                                style="width: 100%">

                            <el-table-column
                                    prop="show_name"
                                    label="目标字段"
                                    width="180">
                            </el-table-column>

                            <el-table-column
                                    prop="excel_col"
                                    label="excel字段"
                                    width="180">
                                <template  slot-scope="scope">
                                    <el-select v-model="scope.row['excel_col']"  filterable placeholder="请选择字段">
                                        <el-option  label="" value="" ></el-option>
                                        <el-option v-for="(item,index) in excel_cols" :label="item.name" :value="item.key"></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>


                            <el-table-column
                                    prop="default_val"
                                    label="默认值"
                                    width="200">
                                <template  slot-scope="scope">
                                    <el-input v-model="scope.row['default_val']" placeholder="默认值"  ></el-input>
                                </template>
                            </el-table-column>

                        </el-table>
                    </el-form-item>
                </template>


            </el-form>

<!--            <button @click="startImport">导入</button>-->
        </div>
    </div>

    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                uploadAction:wwwurl+"/admin/api/UploadController/elementUiUploadDopostFileUpload",
                headers:{token:localStorage.getItem("token")},
                form:{},
                xlsPath:"",
                uploadFileList:[],
                tableData: [],
                errorListData:[],
                parmsData : {},
                tableName:"",
                excel_cols:[],
                proInfo:{pro:0},//导入进度信息
                proShow:false,
                ddbh:"",//当前导入编号
                pageNumber:1,
                pageSize:50,
                pageSizes:[10,15,20,50,100,200,500],
                total:0,
            },
            created(){
                this.parmsData = getParams();
                this.deleteToken();
            },
            methods:{
                async deleteToken(){
                    post("/admin/api/ColumnManagementController/deleteImportExcelToken",{});
                },
                //开始翻页
                handleCurrentChange(val){
                    this.pageNumber = val;
                    this.getErrorListdata();
                },
                //每页记录数改变
                sizeChange(val){
                    this.pageSize = val;
                    this.getErrorListdata();
                },
                uploadSuccess(response, file, fileList){
                    this.xlsPath = response.data.src;
                    this.getData();
                },
                async getData(){
                    const res = await post("/admin/api/ColumnManagementController/getImportExcelHeadInfo",{atth_path:this.xlsPath,tableId:this.parmsData.tableId});
                    this.excel_cols = res.data.excel_cols;
                    this.tableData = res.data.listdict;
                    this.tableName = res.data.tableName;

                },
                //获取导入失败记录
                async getErrorListdata(){
                    let parm = {
                        orderBy: "id desc",
                        tableId: "",
                        other: {ddbh:this.ddbh},
                        pageNumber:""+this.pageNumber,
                        pageSize : ""+this.pageSize
                    }
                    let i = load();
                    const res = await postBody("/admin/api/ColumnManagementController/importErrorPagelist",parm);
                    layer.close(i);
                    if(res.code == 0){
                        top.alert(res.msg);
                        return;
                    }
                    this.errorListData = res.data.rows;
                    this.total = parseInt(res.data.total);
                    this.pageSize = parseInt(res.data.pageSize);
                    this.pageCount = parseInt(res.data.pageCount);
                },
                //开始导入
                async startImport(){
                    this.proShow = true;
                    window.scrollTo(0,0);
                    const res = await postBody("/admin/api/ColumnManagementController/startImportExcel",{tableData:JSON.stringify(this.tableData),atth_path:this.xlsPath,tableId:this.parmsData.tableId});
                    if(res.code == 0){
                        top.alert(res.msg);
                        return;
                    }
                    this.ddbh = res.data;

                    this.getImportProInfo();
                },
                //获取导入进度
                async getImportProInfo(){
                    const res = await post("/admin/api/ColumnManagementController/getImportExcelProInfo",{});
                    if(res.code == 0){
                        return;
                    }
                    this.proInfo = res.data;
                    let pro = Number(this.proInfo.pro);
                    if(pro < 100){
                        this.getImportProInfo();
                    }else {
                        this.getErrorListdata();
                    }
                }
            }
        });
    </script>
</body>
</html>